<template>
  <div class="search-song">
    <song-map-list :song-list="currentSongList"></song-map-list>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed, watch, onMounted, getCurrentInstance } from "vue";
import { useStore } from "vuex";
import SongMapList from "@/components/SongMapList.vue";
import { HttpManager } from "@/api";

export default defineComponent({
  components: {
    SongMapList,
  },
  setup() {
    const { proxy } = getCurrentInstance();
    const store = useStore();

    // 初始化示例歌曲列表（修复重复ID）
    const caogaoList = ref([
      {
        id: 1,
        singerId: 1,
        name: "张杰-仰望星空",
        introduction: "明天过后",
        createTime: 1545813614000,
        updateTime: 1556223260000,
        pic: "/img/songPic/haikuotiankong.jpg",
        lyric: "[ti:仰望星空]\n[ar:张杰]...",
        url: "http://fsandroid.tx.kugou.com/202505171552/7fcbc5041014cee4c7474eeb5162166d/v3/33f76b0aa6c6b8a98d9122c94b37f1f1/yp/full/ap1005_us1028542465_mi336d5ebc5436534e61d16e63ddfca327_pi2_mx0_qu128_s2170040571.mp3"
      },
      {
        id: 2, // 修改为唯一ID
        singerId: 1,
        name: "张杰-这，就是爱",
        introduction: "这，就是爱",
        createTime: 1545813615000,
        updateTime: 1556223261000,
        pic: "/img/songPic/zhejiushiai.jpg",
        lyric: "[ti:这，就是爱]\n[ar:张杰]...",
        url: "/song/张杰-这，就是爱.mp3"
      }
    ]);

    // 搜索结果列表（当前未在模板中使用）
    const currentSongList = ref([]);
    const searchSongMapList=ref([]);
    const searchWord = computed(() => store.getters.searchWord);

    // 监听搜索词变化
    watch(searchWord, (value) => {
      searchSong(value);
    });

    // 搜索网络音乐
    async function searchSong(value) {
      if(!value){
        currentSongList.value = [];
        return ;
      }
      try{
        const hashResult=(await HttpManager.getSongMapOfKey(value) as ResponseBody);

        // 根据hash列表进行获取 歌曲详细信息
        const hashList=hashResult.data;// 获取hash列表
        console.log("hashList",hashList);
        for(const hash of hashList){// 遍历hash列表，请求访问，获取歌曲详细信息
          const songDetailResult=(await HttpManager.getSongMapOfHash(hash)) as ResponseBody;
          console.log("歌曲详情",songDetailResult)
          console.log(typeof songDetailResult);

          if (typeof songDetailResult === "string" && songDetailResult) {// 当这个为string类型的时候，表示酷狗API的hash值返回有问题，
            const songDetailObj = JSON.parse(songDetailResult);
            const data=songDetailObj.data;
            console.log("添加string类型歌曲")
            searchSongMapList.value.push(data)
          }else if(typeof songDetailResult === "object" && songDetailResult){// 这个才是真正的可利用数据
            console.log("添加object类型歌曲")
            searchSongMapList.value.push(songDetailResult?.data);
          }


        }
        console.log("最终的数据为",searchSongMapList)
        currentSongList.value=searchSongMapList.value;


      }catch(e){
        console.error(e);
      }
      if (!value) {
        currentSongList.value = [];
        return;
      }
      // try {
      //   const result = (await HttpManager.getSongOfSingerName(value)) as ResponseBody;
      //   if (!result.data || !result.data.length) {
      //     currentSongList.value = [];
      //     (proxy as any).$message({
      //       message: "暂时没有相关歌曲",
      //       type: "warning",
      //     });
      //   } else {
      //     currentSongList.value = result.data;
      //   }
      // } catch (error) {
      //   console.error("搜索歌曲失败:", error);
      //   currentSongList.value = [];
      //   (proxy as any).$message({
      //     message: "搜索歌曲失败，请稍后重试",
      //     type: "error",
      //   });
      // }
    }

    // 组件挂载时执行初始搜索
    onMounted(() => {
      searchSong(proxy.$route.query.keywords);
    });

    // 返回模板中使用的变量
    return {
      caogaoList, // 添加返回值，使模板可以访问
      currentSongList,
    };
  },
});
</script>